<script setup lang="ts">
import { useRandomTestingStore } from '@/pages/RandomTesting/store'
import { useUserInfoStore } from '@/stores/UserInfo'
import { SettingOutlined } from '@ant-design/icons-vue'

const rootStore = useRandomTestingStore()
const { plainStore, renderQuestionStore, interviewQuestionsEditFormStore, classificationStore } =
  rootStore
const { headerTitle, loading, onShowChangeClassificationModal, onShowSettingDrawer } = plainStore
const { progressStr } = renderQuestionStore
const { onClickEdit } = interviewQuestionsEditFormStore
const { testTypeStr } = classificationStore

const userInfoStore = useUserInfoStore()
</script>

<template>
  <div class="header">
    <div class="test-tital">({{ testTypeStr }}){{ headerTitle }}</div>
    <ASpace style="flex: none">
      <div>{{ progressStr }}</div>
      <AButton :disabled="loading" v-if="userInfoStore.hasLogin" @click="onClickEdit">
        修改题目
      </AButton>
      <AButton :disabled="loading" @click="onShowChangeClassificationModal">切换题库</AButton>
      <AButton style="padding: 0 10px" @click="onShowSettingDrawer">
        <SettingOutlined />
      </AButton>
    </ASpace>
  </div>
</template>

<style lang="less" scoped>
.header {
  width: 100%;
  display: flex;
  padding: 0 16px;
  overflow: hidden;

  .test-tital {
    font-size: 20px;
    font-weight: 600;
    display: flex;
    align-items: center;
    flex: auto;
    width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}
</style>
